<template>
    <section class="address-alert">
      <div class="fade" @click="close"></div>
      <div class="address-box">
        <div class="title">选择地区<i class="icon icon-close" @click="close"></i></div>
        <div class="address-content flex">
          <ul class="border-right">
            <li :class='{active :item.id==provinceId , active :item.id==parent_provinceId}'  v-for="item in province" @click="changeArea(item)">{{item.name}}</li>
          </ul>
          <ul>
            <li :class='{active :item.id== cityId }' v-for="item in city" @click="selectArea(item)">{{item.name}}</li>
          </ul>
        </div>
      </div>
    </section>
</template>
<script>
  let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}$/;
  export default {
    props: {
        provinceId:'',
        provinceName:'',
        cityId:''
    },
    data() {
      return {
          city:[],
          province:[],
          parent_provinceId:'',
          parent_provinceName:'',
      };
    },
    methods: {
        close(){
            this.$parent.isShow=false;
        },
        changeArea(item){
            this.parent_provinceId=item.id;
            this.parent_provinceName=item.name;
            this.getCity(item.id);
        },
        selectArea(item){
            console.log(this.parent_provinceName);
            this.$parent.form.provinceId=this.parent_provinceId;
            this.$parent.provinceName=this.parent_provinceName;
            this.$parent.form.cityId=item.id;
            this.$parent.cityName=item.name;
            this.$parent.isShow=false;
        },
        /**
         * 获取城市地址
         * @param <string> 城市ID
         * */
        getCity(id){
            id = id || '';
          getCity({provinceId: id}).then(data=>{
              if(data.returnCode == '000000'){
                if(id != ''){
                  this.city = data.result.addressList;
                }else{
                  this.province = data.result.addressList;
                    if(this.provinceId){
                        this.parent_provinceId=this.provinceId;
                        this.parent_provinceName=this.provinceName;
                        this.getCity(this.provinceId);
                    }

                }
              }
          })
        },

    },
    filters: {},
    created() {
        this.getCity();
//        var _this=this;
//        setTimeout(function () {
//            console.log(_this.$parent.form.provinceId+"=========="+_this.provinceId,"------",_this.$refs.provinceId.innerHTML)
//        },1000)
//        this.getCity(this.provinceId)

    },
    mounted(){
    },
    components: {
    }
  };
</script>
<style lang="less" scoped>
  .address-alert{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    top:0;
    left: 0;
    .address-box{
      position: absolute;
      width: 100%;
      height: 8.1rem;
      bottom: 0;
      background: #fff;
      z-index: 3;
      .title{
        width: 100%;
        height: .88rem;
        line-height: .88rem;
        background: #F3F6F9;
        text-align: center;
        font-size: .28rem;
        color: #333333;
        i{
          position:absolute;
          right: .32rem;
          font-size: .44rem;
        }
      }
      .address-content{
        width: 100%;
        height: 7.1rem;
        overflow: hidden;
        ul{
          flex: 0 0 50%;
          height: 7.1rem;
          padding-left: .32rem;
          box-sizing: border-box;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          li{
            line-height: .72rem;
            line-height: .72rem;
            font-size: .24rem;
            color: #333333;
            &.active{
              color: #FF4A4A;
            }
          }
        }
      }
    }
  }

</style>
